<template>
  <div class="userMainDiv">
    <div
      style="
        font-size: 35px;
        color: coral;
        display: flex;
        justify-content: space-between;
      "
    >
      <div style="margin-left: 2%; letter-spacing: 0.1em">
        {{ username }}的仓库
      </div>
      <div style="margin-right: 2%">
        <el-button type="warning" @click="addhouse">新建仓库</el-button>
      </div>
    </div>
    <div style="margin: 2%">
      <el-menu
        :default-active="housetype"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="coral"
        @select="handleSelect"
      >
        <el-menu-item index="2">所有</el-menu-item>
        <el-menu-item index="0">公开的</el-menu-item>
        <el-menu-item index="1">私有的</el-menu-item>
      </el-menu>
    </div>
    <div v-if="housedatas.length != 0" class="showhouse">
      <div style="height: 65vh">
        <!-- eslint-disable-next-line -->
        <div
          v-for="housedata in housedatas"
          class="housecarddiv"
          @click="viewhouse(housedata)"
        >
          <el-card
            class="housecard"
            shadow="hover"
            style="cursor: pointer; width: 100%; background-color"
          >
            <template #header>
              <div class="card-header">
                <div
                  class="housename"
                  style="font-weight: 350; font-size: 20px"
                >
                  {{ housedata.housename }}
                </div>
              </div>
            </template>
            <div style="height: 100%; width: 100%">
              <div class="homeintro" style="height: 100px; line-height: 1.7">
                {{ housedata.houseintro.slice(0, 70) }}
                <span v-if="housedata.houseintro.length > 70">··········</span>
              </div>
              <div
                class="informationhouse"
                style="justify-content: space-between; display: flex"
              >
                <span
                  class="creatortype"
                  style="justify-content: space-between; display: flex"
                >
                  <div
                    class="housecreator"
                    style="
                      font-size: 15px;
                      justify-content: space-between;
                      display: flex;
                    "
                  >
                    <el-icon color="coral" style="top:2px"><UserFilled /></el-icon
                    >{{ housedata.ownername }}
                  </div>
                </span>
                <span
                  class="houseupdatetime"
                  style="
                    font-size: 15px;
                    justify-content: space-between;
                    display: flex;
                  "
                >
                  <div class="housetype" >
                    <!--状态不存在0-->
                    <span v-if="housedata.housetype == 1"
                      ><el-icon color="red" style="top:2px"><Lock /></el-icon>私有的</span
                    >
                    <span v-if="housedata.housetype == 0"
                      ><el-icon color="green" style="top:2px"><Unlock /></el-icon>公开的</span
                    >
                  </div>
                  <div style="margin-left: 10px">
                    <el-icon style="top:2px"><Timer /></el-icon>
                    {{
                      housedata.updatetime.slice(5, 10) +
                      " " +
                      housedata.updatetime.slice(11, 16)
                    }}
                  </div></span
                >
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="homepager">
        <el-pagination
          layout="prev, pager,
              next,jumper"
          background
          :page-size="pageSize"
          :total="total"
          :current-Page="currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div v-else>
      <el-empty description="你还没有仓库哦" />
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "UserHomePageMain",
  data() {
    return {
      pageSize: 4,
      userid: "",
      username: "",
      currentPage: 1,
      total: "",
      housetype: "2",
      housedatas: [],
    };
  },
  created() {
    this.findUserByToken();
    this.load();
  },
  methods: {
    findUserByToken() {
      request
        .get("/secure/getUserInfo")
        .then((res) => {
          if (res.code == 200) {
            this.userid = res.data.id;
            this.username = res.data.username;
            this.load();
          } else {
            console.log("获取用户信息失败");
          }
        })
        .catch((err) => {
          console.log("获取用户信息失败");
        });
    },
    //找到这个人满足条件的仓库
    //传用户名(this.userNmae).仓库类型(this.houseType).分页信息(pageSize:4,currentPage:this.currentPage)
    //返回信息data->this.housedatas
    //返回信息total->this.total
    load() {
      request
        .get(
          "/house/showhouses?currentpage=" +
            this.currentPage +
            "&housetype=" +
            this.housetype +
            "&userid=" +
            this.userid
        )
        .then((res) => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.housedatas = res.data.records;
            console.log("获取仓库信息成功");
            console.log(res.data);
          } else {
            console.log("获取仓库信息失败");
          }
        })
        .catch((err) => {
          console.log(err);
          console.log("获取仓库信息失败");
        });
    },
    handleCurrentChange(val) {
      console.log("currentPage: " + val);
      this.currentPage = val;
      this.load();
    },
    handleSelect(index) {
      this.housetype = index;
      console.log("housetype: " + this.housetype);
      this.load();
    },
    viewhouse(housedata) {
      console.log("访问仓库" + housedata.housename);
      this.$router.push(
        "/HouseHomePage/" +
          housedata.ownername +
          "/" +
          housedata.housename +
          "/housecode"
      );
    },
    addhouse() {
      this.$router.push("/addhouse");
    },
  },
};
</script>
<style scoped>
.userMainDiv {
  background-color: #28282808;
  height: 90vh;
  border-radius: 1%;
}
.homepager {
  justify-content: center;
  display: flex;
}
.housecarddiv {
  border-radius: 25px;
  width: 47%;

  margin-left: 2%;
  display: inline-block;
}

.housecard:hover {
  color: cornflowerblue;
}
.card-header:hover {
  color: blue;
}
</style>
